<template>
	<el-table :data="list" style="width: 100%">
		<el-table-column label="ID" prop="id" />
		<el-table-column label="用户名" prop="username" />
		<el-table-column label="密码" prop="password" />
		<el-table-column label="描述" prop="desc" />
		<el-table-column label="操作">
			<template #default="scope">
				<el-button type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
				<el-button type="primary">编辑</el-button>
			</template>
		</el-table-column>
	</el-table>

	<el-pagination
		background
		layout="prev, pager, next"
		:total="total"
		:page-size="page.pageSize"
		@current-change="handleChange"
	></el-pagination>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, reactive } from 'vue'
import { useStore } from 'vuex'
import { StateType } from '@/store'
export default defineComponent({
	setup() {
		const store = useStore<StateType>()
		const list = computed(() => store.state.list)
		const total = computed(() => store.state.total)
		const page = reactive({
			pageCode: 1,
			pageSize: 10
		})

		const handleChange = (pageCode: number) => {
			page.pageCode = pageCode
			store.dispatch('fetch_list', page)
		}
		const handleDelete = (i: number, item:any) => {
			console.log(item);
		}
		onMounted(() => {
			store.dispatch('fetch_list', page)
		})
		return {
			list,
			total,
			page,
			handleChange,
			handleDelete
		}
	}
})
</script>
